<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
    <meta name="renderer" content="webkit">
    <!--国产浏览器高速模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="穷在闹市"/>
    <!-- 作者 -->
    <meta name="revised" content="穷在闹市.v3, 2019/05/01"/>
    <!-- 定义页面的最新版本 -->
    <meta name="description" content="网站简介"/>
    <!-- 网站简介 -->
    <meta name="keywords" content="搜索关键字，以半角英文逗号隔开"/>
    <title>穷在闹市出品</title>

    <!-- 公共样式 开始 -->
    <link rel="stylesheet" type="text/css" href="/css/base.css">
    <link rel="stylesheet" type="text/css" href="/fonts/iconfont.css">
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
    <script type="text/javascript" src="/layui/layui.js"></script>
    <script src="/framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
    <!-- 公共样式 结束 -->


</head>

<body onload="getPageLists()">
<div class="cBody">
    <div class="console">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="name" required lay-verify="required" placeholder="输入分管名称"
                           autocomplete="off" class="layui-input">
                </div>
                <button class="layui-btn" lay-submit lay-filter="submitBut">检索</button>
            </div>
        </form>

        <script>
            layui.use('form', function () {
                var form = layui.form;

                //监听提交
                form.on('submit(submitBut)', function (data) {
                    layer.msg(JSON.stringify(data.field));
                    return false;
                });
            });
        </script>
    </div>

    <table class="layui-table">
        <thead>
        <tr>
            <th>用户名称</th>
            <th>性别</th>
            <th>电话</th>
            <th>邮箱</th>
            <th>年龄</th>
            <th>角色</th>
            <!--	<th>权限</th>-->
            <th>更新时间</th>
            <th>创建时间</th>
            <th>操作</th>

        </tr>
        </thead>
        <tbody id="pageList">
        <tr>
            <td>龙九山</td>
            <td>男</td>
            <td>无锡市</td>
            <td>龙九山</td>
            <td>龙九山</td>
            <td>18600001111</td>
            <!--	<td>028-6666666</td>-->
            <td>123456789@qq.com</td>
            <td>123456789@qq.com</td>
            <td>
                <button class="layui-btn layui-btn-xs" onclick="button()">修改</button>
                <button class="layui-btn layui-btn-xs">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
    <!--修改模块-->
    <div id="content" hidden="hidden">
        <form th:action="@{/admin/updateUser}" id="update" class="ui form">
            <div class="field">
                <span>用户名</span>
                <span style="margin-left: 190px">电话</span>
                <div class="two fields">
                    <div class="field">
                        <input type="text" id="username" name="username" placeholder="用户名">
                    </div>
                    <div class="field">
                        <input type="text" name="phone" id="phone" placeholder="电话">
                    </div>
                </div>
            </div>
            <div class="field">
                <span>邮箱</span>
                <span style="margin-left: 315px">年龄</span>
                <div class="fields">
                    <div class="twelve wide field">
                        <input type="text" name="email" id="email" placeholder="邮箱">
                    </div>
                    <div class="four wide field">
                        <input type="text" name="age" id="age" placeholder="年龄 #">
                    </div>
                </div>
            </div>
            <span>角色</span>
            <div class="two fields">
                <div class="field">
                    <select name="role" id="role" class="ui fluid dropdown">
                        <option value="admin">admin</option>
                        <option value="teacher">teacher</option>
                        <option value="student">student</option>
                    </select>
                </div>

            </div>
            <span>性别</span>
            <div class="two fields">
                <div class="field">
                    <select name="sex" id="sex" class="ui fluid dropdown">
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                </div>

            </div>
            <div class="ui button" tabindex="0" style="margin-left: 350px">提交</div>
        </form>
    </div>
    <!-- layUI 分页模块 -->
    <div class="h_55"></div>
    <div id="page" align="center"></div>
    <script>
        function page(page) {
            layui.use(['laypage', 'layer'], function () {
                var laypage = layui.laypage,
                    layer = layui.layer;

                //总页数大于页码总数
                laypage.render({
                    elem: 'page'
                    , count: page.count
                    , limit: page.pageSize
                    , curr: page.currentPage
                    , jump: function (obj, first) {

                        if (!first) {
                            getPageLists(obj.curr);

                        }
                    }
                });


            });
        }

        function button(userId, roleId) {

            $.ajax({
                url: '/admin/queryByID?userId=' + userId + '&roleId=' + roleId,
                success: function (data) {
                    $("#username").attr("value", data.users.username)
                    $("#phone").attr("value", data.users.phone)
                    $("#email").attr("value", data.users.email)
                    $("#age").attr("value", data.users.age)
                    $("#role option").attr("selected", false);
                    $("#role option[value=" + data.roles.name + "]").attr("selected", true);
                    $("#sex option").attr("selected", false);
                    $("#sex option[value=" + data.users.sex + "]").attr("selected", true);
                    var html = $("#content").html();
                    layer.open({
                        type: 1,
                        title: '用户修改',
                        id: 'myp',
                        area: ['450px', '400px'], //宽高
                        content: html,
                        success: function (layero, index) {
                            var btn = layero.find('.layui-layer-btn0');
                        },
                        yes: function (index, layero) {
                            layer.close(index); //如果设定了yes回调，需进行手工关闭

                        },
                    })

                }
            })


        }

        function getPageLists(pageIndex) {

            if (pageIndex == null) {
                pageIndex = 1;
            }
            $.ajax({
                url: '/admin/queryList',
                data: {pageIndex: pageIndex},
                success: function (data) {
                    var th = ""
                    var sex = "";
                    var listPage = data.listPage;
                    for (var i = 0; i < listPage.length; i++) {
                        if (listPage[i].users.sex == "1" || listPage[i].users.sex == 1) {
                            sex = "男"
                        } else {
                            sex = "女"
                        }
                        th +=
                            '<tr><td>' + listPage[i].users.username + '</td>\n' +
                            '<td>' + sex + '</td>\n' +
                            '<td>' + listPage[i].users.phone + '</td>\n' +
                            '<td>' + listPage[i].users.email + '</td>\n' +
                            '<td>' + listPage[i].users.age + '</td>\n' +
                            '<td>' + listPage[i].roles.name + '</td>\n' +
                            /*'<td>'+listPage[i].permissions.perms+'</td>\n' +*/
                            '<td>' + formatDate(listPage[i].users.createTime) + '</td>\n' +
                            '<td>' + formatDate(listPage[i].users.updateTime) + '</td>\n' +
                            "<td>\n" +
                            '<button   class=\"layui-btn layui-btn-xs\"  onclick=\"button(\'' + listPage[i].users.id + '\',\'' + listPage[i].roles.id + '\')\">修改</button>\n' +
                            "<button class=\"layui-btn layui-btn-xs\">删除</button>\n" +
                            "</td></tr>\n"

                    }
                    page(data.page)
                    $("#pageList").html(th)


                }
            })
        }

        function formatDate(date) {
            var d = new Date(date),
                month = '' + (d.getMonth() + 1),
                day = '' + d.getDate(),
                year = d.getFullYear();

            if (month.length < 2) month = '0' + month;
            if (day.length < 2) day = '0' + day;

            return [year, month, day].join('-');
        }

    </script>
</div>
</body>

</html>